<template>
  <div>
    <h1>layout组件使用</h1>
    <h2>创建页面中一行 </h2>
    <!-- 创建页面中一行   -->
    <el-row>
      <el-col :span="6"><div style="border: 1px red solid;">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid;">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid;">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid;">占用6份</div></el-col>
    </el-row>
    <br>
    <h2>不规则占用</h2>
    <!-- 不规则占用   -->
    <el-row :gutter="50" tag="span">
      <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
      <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
    </el-row>

    <h2>layout组件中使用偏移</h2>
    <el-row>
      <!-- 居中 (24-12)/2=6     -->
      <el-col :span="12" :offset="6"><div style="border: 1px blue solid;">占用12份</div></el-col>
    </el-row>

    <h1>push</h1>
    <el-row>

      <el-col :span="12" :offset="6" :push="3"><div style="border: 1px blue solid;">占用12份</div></el-col>
    </el-row>

    <h2>偏移了6份，后面还剩6份</h2>
    <el-row>
      <!--偏移了6份，后面还剩6份 24-6-12=6-->
      <el-col :span="12" :offset="6" ><div style="border: 1px blue solid;">占用12份</div></el-col>
      <el-col :span="6" ><div style="border: 1px blue solid;">占用6份</div></el-col>
    </el-row>
    <h2>如果地方不够了，会把另一个col挤下去</h2>
    <el-row>
      <!--偏移了6份，后面还剩6份 24-6-12=6-->
      <el-col :span="12" :offset="7" ><div style="border: 1px blue solid;">占用12份</div></el-col>
      <el-col :span="6" ><div style="border: 1px blue solid;">占用6份</div></el-col>
    </el-row>

    <h2>push相当于右浮动</h2>
    <el-row>
      <!--偏移了6份，后面还剩6份 24-6-12=6-->
      <el-col :span="12" :offset="6" :push="3"><div style="border: 1px blue solid;">占用12份</div></el-col>
      <el-col :span="6" ><div style="border: 1px blue solid;">占用6份</div></el-col>
    </el-row>

    <h2>pull相当于左浮动</h2>
    <el-row>
      <!--偏移了6份，后面还剩6份 24-6-12=6-->
      <el-col :span="12"><div style="border: 1px blue solid;">占用12份</div></el-col>
      <el-col :span="6" :pull="3"><div style="border: 1px blue solid;">占用6份</div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Layout"
}
</script>

<style scoped>

</style>
